 import React from 'react'
import {BsMusicNote } from 'react-icons/bs'
import styled from 'styled-components'
const AppLogoContainer = styled.div.attrs(({theme})=>theme)`
	width: 100%;
	display: flex;
	justify-content: center;
	color:${props => props.textColor};
	@keyframes example {
		0% {
			color: #0000ff;
			//transform: rotate(0deg);
		}
		50% {
			color: #ffff00;
			transform: scale(1.5);
		}
		100% {
			color: #ff0000;
		}
	}
`
const AppLogoIcon = styled.span`
	box-sizing:border-box ;
	position: relative;
	font-size:.4rem;
	.Notes {
		position: absolute;
		z-index: 999;
	}
	.Notes1 {
		right: 6px;
		top: 34px;
	}

	.Notes2 {
		left: 0px;
		top: 0px;
	}

	.Notes3 {
		left: 30px;
		top: 3px;
	}

	.Notes4 {
		left: 69px;
		top: 21px;
	}
	.title{
	}
`
export default React.memo(function AppLogo () {
	return (
		<AppLogoContainer>
			<AppLogoIcon>
				{/* <BsMusicNote className={'Notes Notes1'} /> */}
				{/* <BsMusicNote className={'Notes Notes2'} /> */}
				 {/* <BsMusicNote className={'Notes Notes3'} /> */}
				{/* <BsMusicNote className={'Notes Notes4'} />  */}
				 {/* <BsEarbuds /> */}
				<p className='title'>村望LISTEN</p>
			</AppLogoIcon>
		</AppLogoContainer>
	)
})
